<template>
	<!-- 歌曲列表 -->
	
	<view>
		
		<view class="songListBox" v-for="(item,index) in songsListData" :key='index' style="display: flex; margin: 10upx;"
			@click="getSongURL(item.id)">
			<!-- 歌曲序号或者排名 -->
			<view class="topText" style="padding-top: 20upx;">
				<text>{{index + 1}}</text>
			</view>
			<!-- <view class="songImage" style="margin-left: 10upx;margin-right:10upx ;">
				<image :src='item.al.picUrl' style="width: 80upx;height: 80upx;"></image>
			</view> -->
			<!-- 歌曲名字与歌手 -->
			<view class="SongNameAndSinger">
				<view class="SongName">
					<text>{{item.name}}</text>
				</view>
				<view class="Singer">
					<block v-for="(name,i) in item.ar" :key='i'>
						<text>{{name.name}}/</text>
					</block>
					<text>{{item.al.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			songsListData: Array,

		},
		components:{
		},
		onLoad:function(options){
			uni.setNavigationBarTitle({
				title:options.title
			})
			
		},
		methods:{
			getSongURL(songId){
				this.$emit('songId',songId)
			}
		}
	}
</script>

<style scoped>
	.Singer{
		color: #666666;
	}
</style>
